<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>打印</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <script src="/qrcode/qrcode.js"></script>
    <script src="/qrcode/jquery-3.5.1.js"></script>
    <script src="/qrcode/jQuery.print.js"></script>
    <link rel="stylesheet" href="/component/layui/css/layui.css">
    <style>
        .print-content {
            display: flex;
            align-items: center;
            flex-direction: column;
        }

        .print-content .qrCode {
            margin-top: 10px;
        }

        .archivesData {
            display: flex;;
            margin-top: 10px;
            font-size: 10px;
        }

        .archivesData .number {
            margin-left: 15px;
        }

        .layui-btn {
            width: 200px;
            height: 40px;
            line-height: 40px;
            font-size: 20px;
            border-radius: 10px;
        }
    </style>
    <style>
        @page {
            /*width: 40mm; !* 设置打印页面的宽度为210mm *!*/
            /*height: 30mm; !* 设置打印页面的高度为297mm *!*/
            margin: 1mm; /* this affects the margin in the printer settings */
        }
    </style>
</head>
<body>
<!--<div class="layui-row" style="display: flex;-->
<!--    align-items: center;-->
<!--    flex-direction: column;-->
<!--    margin-top: 40px;">-->
<!--    <button type="button" class="layui-btn" id="print-btn" onclick="printThis()">打印</button>-->
<!--</div>-->
<!--startprint-->
<div class="codeBody">
    <!--    <div class="print-content">-->
    <!--        <div id="code" class="qrCode"></div>-->
    <!--        <div class="archivesData">-->
    <!--            <div th:text="${fileName}"></div>-->
    <!--            <div class="number" th:text="${number}"></div>-->
    <!--        </div>-->
    <!--    </div>-->
</div>
<!--endprint-->
<script src="/component/layui/layui.js"></script>
<script th:inline="javascript">
    var uuidList = [[${uuidList}]];
    var qrCodeId = [[${qrCodeId}]];

    for (index in uuidList) {
        let data = uuidList[index];
        let code = "code" + (index + 1);
        let html = "";
        html += '<div class="print-content">';
        html += '<div id="' + code + '" class="qrCode"></div>';
        html += '<div class="archivesData">';
        html += '<div>序号&nbsp;&nbsp;' + data.serialNumber + '</div>';
        html += '</div>';
        html += '</div>';
        $(".codeBody").append(html);
        new QRCode(document.getElementById(code), {
            text: "ZXKJ:" + data.uuid,
            width: 70,
            height: 70,
            // colorDark : "#f60",
            // colorLight : "#ccc",
            correctLevel: 0 // 二维码结构复杂性 0~3
        });
    }

    function printThis() {
        //print打印时去掉页眉和页脚
        // $(".print-content").print({
        //     globalStyles: true,//是否包含父文档的样式，默认为true
        //     mediaPrint: false,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
        //     noPrintSelector: ".avoid-this",//不想打印的元素的jQuery选择器，默认为".no-print"
        // });
        // parent.layer.close(parent.layer.getFrameIndex(window.name));//关闭当前页
        // window.parent.uuid = uuid;
        let oldStr = window.document.body.innerHTML; // 获取body的内容
        let start = "<!--startprint-->"; // 开始打印标识, 17个字符
        let end = "<!--endprint-->"; // 结束打印标识
        let newStr = oldStr.substr(oldStr.indexOf(start) + 17); // 截取开始打印标识之后的内容
        newStr = newStr.substring(0, newStr.indexOf(end)); // 截取开始打印标识和结束打印标识之间的内容
        window.document.body.innerHTML = newStr; // 把需要打印的指定内容赋给body
        window.print(); // 调用浏览器的打印功能打印指定区域
        window.document.body.innerHTML = oldStr; // body替换为原来的内容
        $.get("/archives/batch/qrCode/delete", {"qrCodeId": qrCodeId}, function (res) {
            parent.layer.close(parent.layer.getFrameIndex(window.name));
        });

    }

    $(document).ready(function () {
        printThis();
    });

    // var qrcode = new QRCode(document.getElementById("code"), {
    //     text: "ZXKJ:" + uuid,
    //     width: 70,
    //     height: 70,
    //     // colorDark : "#f60",
    //     // colorLight : "#ccc",
    //     correctLevel: 0 // 二维码结构复杂性 0~3
    // });


</script>
</body>
</html>